<template>
  <!-- 购物车列表页面 -->
  <div class="orderlist">
    <ul class="orderlaista">
      <li class="laist" v-for="(item, index) in cartList" :key="index">
        <div class="cartList">
          <div class="xuanzhe">
            <van-checkbox
              v-model="item.checked"
              checked-color="#1989fa"
              @click="select(index)"
            ></van-checkbox>
          </div>
          <div class="content">
            <div class="img">
              <van-image
                width="100%"
                height="100%"
                fit="fill"
                :src="item.picUrl"
              />
            </div>
            <div class="right">
              <ul>
                <li>
                  <span>{{ item.goodsName }}</span>
                </li>
                <li>
                  <div @click="specification(index)">
                    <span v-for="(t, i) in item.specifications" :key="i">{{
                      t
                    }}</span>
                  </div>
                </li>
                <li>
                  <div style="flex: 1">
                    <span>￥</span><span class="price">{{ item.price }}</span>
                  </div>

                  <!-- 添加数量的选择器 -->
                  <div class="jinbu">
                    <van-stepper
                      v-model="item.number"
                      theme="round"
                      button-size="18"
                      disable-input
                      input-width="16"
                      @change="update(index)"
                    />
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import eventVue from "../../src/assets/zizhujian/index";
import { Toast } from "vant";
import API from "../http/API";
import { Stepper } from "vant";
import { Checkbox, CheckboxGroup } from "vant";
import { Card } from "vant";
import { Image } from "vant";
export default {
  props: ["ShoppingCartList"],
  components: {
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Card.name]: Card,
    [Image.name]: Image,
    [Stepper.name]: Stepper,
    [Toast.name]: Toast,
  },
  data() {
    return {
      value: 1,
      checked: true,
      cartList: [],
    };
  },
  watch: {
    ShoppingCartList(val) {
      this.cartList = val.cartList;
      // 进行数据处理
    },
  },
  created: function () {
    this.checkbox();
  },
  methods: {
    // 拿到传值的项
    checkbox: function () {
      eventVue.$on("checkbox", (e) => {
        //这里最好用箭头函数，不然this指向有问题
        this.quanxun(e);
        // 如果是true就让他进行全选
      });
    },
    toggle(index) {
      this.$refs.checkboxes[index].toggle();
    },
    // 更新购物车数量
    update(res) {
      // console.log(res);
      this.$post(API.POST_CART_UPDATE, {
        //       ①封装 token
        // ②productId: 当前商品指定规格的商品 ID,
        // ③goodsId: 当前商品 ID,
        // ④number: 商品数量,
        // ⑤id: 购物车 ID

        token: localStorage.getItem("token"),
        productId: this.cartList[res].productId,
        // isChecked: this.cartList[e].checked,
        goodsId: this.cartList[res].goodsId,
        number: this.cartList[res].number,
        id: this.cartList[res].id,
      }).then((res) => {
        // 成功添加数据的时候让他重新获取数据
        this.http(res);
      });
    },
    // 购物车列表
    http(res) {
      this.$get(API.GET_CART_INDEX, {
        token: localStorage.getItem("token"),
      }).then((res) => {
        // 成功的话就把事件数据传过显示价格的组件里面去
        if (res.errmsg == "成功") {
          this.cartList = res.data.cartList;
          this.$forceUpdate();
          // console.log(res);
          eventVue.$emit("sum", res.data); //$emit这个方法会触发一个事件
          // eventVue.$emit("sum", res.data);
        }
      });

      // 将选择全部取消
    },

    // 点击的时候让他选择选择
    select: function (e) {
      this.$post(API.POST_CART_CHECKED, {
        //         ①封装 token
        // ②productIds: 当前商品指定规格的商品 ID,
        // ③isChecked：是否选择
        token: localStorage.getItem("token"),
        productIds: [this.cartList[e].productId],
        isChecked: this.cartList[e].checked,
      }).then((res) => {
        // 这里设置选择的时候也是成功就传过去
        if (res.errmsg == "成功") {
          // 发送价格事件过去
          eventVue.$emit("sum", res.data); //$emit这个方法会触发一个事件
          this.onxuan(res);
        }

        // console.log(res);
      });
    },

    onxuan(e) {
      // 进行如果商品都是被选中了就让他成为全选
      // console.log(e.data);
      let quan = false;
      for (let index = 0; index < e.data.cartList.length; index++) {
        if (e.data.cartList[index].checked == true) {
          // let
          quan = true;
        } else {
          quan = false;
          break;
        }
      }
      if (quan) {
        eventVue.$emit("quanx", true);
      } else {
        eventVue.$emit("quanx", false);
      }
    },

    // 选择更改规格的时候
    specification: function (e) {
      console.log(this.cartList[e]);
      // console.log(e);
      console.log(this.cartList[e]);
      // 传值去父组件
      console.log(this.cartList[e].id);
      this.$emit("fromChild", this.cartList[e]);
      eventVue.$emit("myFun", true);
      // 通过vuex来拿到购物车id
      this.$store.commit("shoppingID", this.cartList[e].id);
    },

    // 在这边进行网络请求让所有商品进全选
    quanxun(e) {
      // console.log(e);
      const toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中",
      });

      this.$get(API.GET_CART_INDEX, {
        token: localStorage.getItem("token"),
      }).then((res) => {
        // console.log(res.data);
        let arr = [];
        for (let index = 0; index < res.data.cartList.length; index++) {
          console.log(res.data.cartList);
          arr.push(res.data.cartList[index].productId);
          // e.cartList[index].checked = false;
        }
        this.$post(API.POST_CART_CHECKED, {
          //         ①封装 token
          // ②productIds: 当前商品指定规格的商品 ID,
          // ③isChecked：是否选择
          token: localStorage.getItem("token"),
          productIds: arr,
          isChecked: e,
        }).then((res) => {
          // console.log(138);
          // console.log(res);
          // this.cartList = res.data;
          if (res.errmsg == "成功") {
            this.cartList = res.data.cartList;
            eventVue.$emit("sum", res.data);
            Toast.clear();
          }
        });
        // 将选择全部取消
      });
    },
  },
};
</script>

<style lang="less" scoped>
.orderlist {
  .ping {
    padding: 5px 5px 5px 5px;
  }
  //   border: 1px solid #000;
  height: 100%;
  .sj();

  .orderlaista {
    .laist {
      margin-top: 10px;
      border-radius: 10px;
      overflow: hidden;
      background-color: rgb(253, 253, 253);
      .cartList {
        width: 100%;
        height: 100px;
        display: flex;
        // .centered();
        .xuanzhe {
          width: 30px;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .content {
          display: flex;
          .img {
            width: 80px;
            height: 100%;
            border-radius: 5px;
            overflow: hidden;
          }
          .right {
            margin-left: 5px;
            flex: 1;
            ul {
              // height: 100%;

              li {
                height: 25px;
                // width: 100%;
                margin-right: 5px;
                // border: 1px solid #000;
                // border: 1px solid #000;
                line-height: 25px;
                &:nth-child(1) {
                  font-size: 17px;
                }
                &:nth-child(2) {
                  border-radius: 5px;
                  // margin-left: 3px;
                  color: rgb(175, 175, 175);

                  div {
                    width: auto;
                    display: inline-block !important;
                    display: inline;
                    // display: flex;
                    border-radius: 5px;
                    background-color: rgba(228, 228, 228, 0.568);

                    span {
                      display: block;
                      float: right;
                      margin-right: 5px;
                      margin-left: 5px;
                    }
                  }
                }
                &:nth-child(3) {
                  display: flex;
                  .price {
                    font-size: 17px;
                  }
                  color: rgb(233, 86, 86);
                  .jinbu {
                    width: 80px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    // border: 1px solid #000;
                  }
                }
              }
            }
          }
          flex: 1;
          margin-top: 10px;
          margin-bottom: 10px;
          // border: 1px solid #000;
        }
      }
      // .centered();

      // border: 1px solid #000;
    }
  }
}
</style>